<template lang="pug">
  .app-container.product-detail
    h1.page-title 产品配置
    .main
      el-breadcrumb(
        class="title"
        separator-class="el-icon-arrow-right")
        el-breadcrumb-item(:to="{ path: '/product' }") 产品列表
        el-breadcrumb-item {{ detail.typeName }}
      el-row(class="tool-bar")
          el-button(
            v-for="btn in buttonGroup"
            :key="btn.value" size="mini"
            :type="btn.value === buttonValue? 'primary':''"
            @click="onChangeButton(btn.value)") {{ btn.label }}
      .detail-wrapper
        table(cellspacing="0" cellpadding="0" border="0" style="width:100%")
          tr
            td.label
              .cell 产品名称
            td
              .cell 产品名称
            td.label
              .cell 节点类型
            td
              .cell 节点类型
            td.label
              .cell 所属项目
            td
              .cell 所属项目
          tr
            td.label
              .cell 协议类型
            td
              .cell 产品名称
            td.label
              .cell 所属系统
            td
              .cell 所属系统
            td.label
              .cell 创建时间
            td
              .cell 创建时间
          tr
            td.label
              .cell 产品类型
            td
              .cell 产品名称
            td.label
              .cell 产品图标
            td
              div(style="text-align:center")
                el-image(
                  style="width: 32px; height: 32px;vertical-align: top;"
                  src="/data/icon/deviceTypeIcon/20190308143514264304.jpg"
                  fit="scale-down")
            td.label
              .cell 产品图片
            td
              div(style="text-align:center")
                el-image(
                  style="width: 32px; height: 32px;vertical-align: top;"
                  src="/data/icon/deviceTypeIcon/20190308143514264304.jpg"
                  fit="scale-down")
          tr
            td.label
              .cell 产品描述
            td(colspan="5")
              .cell 产品名称
      el-row(type="flex" class="tool-bar" justify="end")
        el-button(
            v-show="buttonValue === 1"
            size="mini"
            type="primary"
            @click="onChangeButton(btn.value)") 添加参数
        el-button(
          v-show="buttonValue === 2"
            size="mini"
            type="primary"
            @click="onChangeButton(btn.value)") 添加遥信
        el-button(
          v-show="buttonValue === 3"
            size="mini"
            type="primary"
            @click="onChangeButton(btn.value)") 添加遥测
      .table-wrapper
        //- 参数信息
        el-table(
          v-show="buttonValue === 1"
          :data="list"
          stripe
          highlight-current-row=true
          style="width: 100%"
          height="100%")
          el-table-column(
            prop="typeCode"
            label="参数编码")
          el-table-column(
            prop="typeName"
            label="参数名称")
          el-table-column(
            prop=""
            label="读写类型")
          el-table-column(
            prop=""
            label="数据类型")
          el-table-column(
            prop=""
            label="参数值")
          el-table-column(
            prop=""
            label="单位")
          el-table-column(
            prop=""
            label="备注")
          el-table-column(
            prop=""
            label="更新时间")
          el-table-column(
            prop=""
            label="数据存储")
          el-table-column(width="100")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 操作
            template(slot-scope="scope")
              div(class="button-wrapper")
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)") 编辑
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)") 删除
        //- 遥信信息
        el-table(
          v-show="buttonValue === 2"
          :data="list"
          stripe
          highlight-current-row=true
          style="width: 100%"
          height="100%")
          el-table-column(
            prop="typeCode"
            label="遥信编号")
          el-table-column(
            prop="typeName"
            label="遥信名称")
          el-table-column(
            prop=""
            label="遥信信号")
          el-table-column(
            prop=""
            label="告警条件")
          el-table-column(
            prop=""
            label="告警等级")
          el-table-column(
            prop=""
            label="告警方式")
          el-table-column(
            prop=""
            label="开关类型")
          el-table-column(
            prop=""
            label="数据存储")
          el-table-column(
            prop=""
            label="状态名称")
          el-table-column(width="100")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 操作
            template(slot-scope="scope")
              div(class="button-wrapper")
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)") 编辑
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)") 删除
        //- 遥测信息
        el-table(
          v-show="buttonValue === 3"
          :data="list"
          stripe
          highlight-current-row=true
          style="width: 100%"
          height="100%")
          el-table-column(
            prop="typeCode"
            label="遥测编号")
          el-table-column(
            prop="typeName"
            label="遥测名称")
          el-table-column(
            prop=""
            label="遥测信号")
          el-table-column(
            prop=""
            label="遥测单位")
          el-table-column(
            prop=""
            label="当前值")
          el-table-column(
            prop=""
            label="告警等级")
          el-table-column(
            prop=""
            label="告警方式")
          el-table-column(
            prop=""
            label="数据存储")
          el-table-column(width="100")
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 操作
            template(slot-scope="scope")
              div(class="button-wrapper")
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)") 编辑
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)") 删除

</template>

<script>
export default {
  name: 'ProductDetail',
  data () {
    return {
      // 产品详情
      detail: {
        id: 296,
        typeName: 'Bim模型设备',
        delFlag: 0,
        mark: 1,
        typeCode: 1,
        createCompanyId: 251,
        manufacturerCompanyId: 0,
        protocolType: 0,
        devicePamUserId: 0,
        type: 0,
        categoryId: 16815,
        projectInfoList: [
          {
            projectName: '测试-自贸大厦',
            projectId: 6
          },
          {
            projectName: '自贸大厦0624',
            projectId: 9
          }
        ]
      },
      // 按钮组
      buttonGroup: [
        {
          label: '参数配置',
          value: 1
        },
        {
          label: '遥信配置',
          value: 2
        },
        {
          label: '遥测配置',
          value: 3
        }
      ],
      buttonValue: 1,
      // 表格数据
      list: [
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        }
      ]
    }
  },
  methods: {
    onChangeButton (value) {
      this.buttonValue = value
    },

    onSubmit () {
      console.log('submit!', this.form)
    }
  }
}
</script>

<style lang="stylus" scoped>
.app-container
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color #f2f2f7
  padding 20px
  display flex
  flex-direction column
.page-title
  margin-top 0
  color #000
  font-size 24px
  font-weight normal
  flex-shrink 0
.main
  flex 1
  overflow hidden
  background-color #ffffff
  display flex
  flex-direction column
.title
  margin 16px 0
  display flex
  align-items center
  color #000
  font-size 20px
  font-weight normal
  &::before
    content ''
    display inline-block
    width 7px
    height 22px
    margin-right 20px
    background-color #017eff
.tool-bar
  margin 0 20px
.detail-wrapper
  margin 20px
  table, td
    border 1px solid #ccc
    border-collapse collapse
    font-size 14px
    line-height 1
  .label
    width 100px
    .cell
      background-color #EEF7FF
      color #808080
  .cell
    padding 16px 20px
    color #666666
.table-wrapper
  margin 20px
  flex 1
  overflow hidden
.pagination-wrapper
  margin 20px
  display flex
  justify-content flex-end
.button-wrapper
  display flex
  justify-content center
</style>

<style lang="stylus">
.product-detail
  .el-scrollbar__wrap
    overflow-x hidden
  .el-table
    .current-row
        // border: 1px solid #1890ff
        background-color #edf3f8
        position relative
        &::after
          content ''
          position absolute
          right 0
          height 46px
          left 0
          border 1px solid #1890ff
          pointer-events none
    thead
      color #1F232B
    th
      background-color #F8F8F9
  .title .is-link
    font-weight normal
</style>
